import React, { useState, useEffect } from "react";
import "./index.less";

// 导入活动图片资源
import titleImg from "@/assets/active/title.png";
import subTitleImg from "@/assets/active/subTitle.png";
import mainImg from "@/assets/active/main.png";
import btnImg from "@/assets/active/btn.png";
import { BackgroundButton } from "../button";

/**
 * 活动弹框组件
 * @param {Object} props
 * @param {boolean} props.visible - 是否显示弹框
 * @param {Function} props.onClose - 关闭弹框回调
 * @param {Function} props.onConfirm - 确认按钮点击回调
 * @param {Object} props.data - 活动数据
 * @param {string} props.data.amount - 数智豆数量
 * @param {string} props.data.code - 兑换码
 * @param {string} props.data.balance - 当前余额
 * @param {string} props.data.discount - 会员折扣
 * @param {string} props.data.validPeriod - 有效期
 */
function ActiveModal({ visible, onClose, onConfirm, title }) {
  const [isAnimating, setIsAnimating] = useState(false);

  useEffect(() => {
    if (visible) {
      requestAnimationFrame(() => {
        setIsAnimating(true);
      });
    } else {
      setIsAnimating(false);
    }
  }, [visible]);

  if (!visible) return null;

  return (
    <div
      className={`active-modal-backdrop ${isAnimating ? "show" : "hide"}`}
      onClick={onClose}
    >
      <div
        className={`active-modal ${isAnimating ? "show" : "hide"}`}
        onClick={(e) => e.stopPropagation()}
      >
        {/* 顶部图片 */}
        <div className="active-top">
          <img src={titleImg} className="top-img" />
        </div>
        <div className="sub-title">
          <img src={subTitleImg} className="footer-img" />
        </div>
        <div className="active-modal-title"> {title}</div>

        {/* 主要内容图片 */}
        <div className="active-main">
          <img src={mainImg} alt="活动内容" className="main-img" />
        </div>

        <div className="active-bottom">
          <BackgroundButton
            type="primary"
            backgroundImage={btnImg}
            onClick={onConfirm}
            className="btn-img"
          >
            立即领取
          </BackgroundButton>
        </div>
      </div>
    </div>
  );
}

export default ActiveModal;
